<template>
  <TransitionRoot appear as="template" :show="open">
    <Dialog as="div" class="relative z-10">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-black/25" />
      </TransitionChild>
      <div class="fixed inset-0 overflow-y-auto">
        <div
          class="flex min-h-full items-center justify-center p-4 text-center"
        >
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="w-full max-w-md transform overflow-hidden rounded-sm bg-white p-6 text-left align-middle shadow-xl transition-all"
              :style="{ width: width, height: height }"
            >
              <!-- Add countdown in the top right corner -->
              <div
                class="absolute top-0 right-0 p-2 text-sm text-gray-600"
                v-if="countdown > 0"
              >
                {{ countdown }}s
              </div>

              <DialogTitle
                as="h3"
                class="text-lg font-medium leading-6 text-gray-900"
              >
                {{ title }}
              </DialogTitle>
              <div class="mt-2">
                <p class="text-sm text-gray-500" v-html="content"></p>
              </div>
              <div class="mt-4">
                <button
                  v-if="showOk"
                  type="button"
                  @click="onHanderlClick"
                  class="button1 inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                >
                  {{ buttonMessage.confirm }}
                </button>
                <button
                  v-if="showCancelButton"
                  type="button"
                  class="button2 ml-2 inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                  @click="onHanderlClick"
                >
                  {{ buttonMessage.cancel }}
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script setup>
import { defineProps, ref, onMounted, onUnmounted } from 'vue'
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
  DialogTitle
} from '@headlessui/vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '500px'
  },
  height: {
    type: String,
    default: '300px'
  },
  showCancelButton: {
    type: Boolean,
    default: false
  },
  showOk: {
    type: Boolean,
    default: false
  },
  buttonMessage: {
    type: Object,
    default: () => {
      return {
        confirm: '确定',
        cancel: '取消'
      }
    }
  },
  countdownTime: {
    // Time for countdown in seconds (optional prop)
    type: Number,
    default: 0
  }
})

const open = ref(true)
const countdown = ref(props.countdownTime)
const interval = ref(null)
const startCountdown = () => {
  if (interval.value) clearInterval(interval.value)
  interval.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value -= 1
    } else {
      clearInterval(interval.value)
      open.value = false
      onHanderlClick()
    }
  }, 1000)
}

onUnmounted(() => {
  if (interval.value) clearInterval(interval.value)
})

onMounted(() => {
  startCountdown()
})

const onHanderlClick = () => {
  open.value = false
  clearInterval(interval.value)
}
</script>

<style scoped>
/* Optional: Custom style for countdown display */
</style>
